<template>
    <div class="activity">
		<el-form :inline="true" :model="formData" class="demo-form-inline">
			<el-form-item>
				<el-input v-model="formData.activityName" placeholder="活动名称" clearable></el-input>
			</el-form-item>
            <el-form-item>
				<el-select v-model="formData.state" placeholder="活动状态" clearable>
					<el-option label="进行中" value="0"></el-option>
					<el-option label="已结束" value="1"></el-option>
					<el-option label="已取消" value="2"></el-option>
				</el-select>
			</el-form-item>
            <el-form-item>
				<el-button type="primary" @click="onSearch" icon="el-icon-search">搜索 </el-button>
			</el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="id" label="活动id" align="center"></el-table-column>
			<el-table-column prop="activityName" label="活动名称" align="center"></el-table-column>
			<!-- <el-table-column prop="createId" label="创建人id" align="center"></el-table-column> -->
			<el-table-column prop="latitude" label="纬度" align="center" width="100"></el-table-column>
			<el-table-column prop="longitude" label="经度" align="center" width="100"></el-table-column>
            <el-table-column prop="sweetNum" label="红包糖果总数" align="center"></el-table-column>
            <el-table-column prop="redEnvelopesNum" label="红包数量" align="center"></el-table-column>
			<el-table-column prop="redEnvelopesType" label="红包类型" align="center">
                <template slot-scope="scope">
					{{redEnvelopesTypes[scope.row.redEnvelopesType]}}
				</template>
            </el-table-column>
			<el-table-column prop="state" label="活动状态" align="center">
                 <template slot-scope="scope">
					{{states[scope.row.state]}}
				</template>
            </el-table-column>
            <el-table-column prop="url" label="活动图片地址" align="center" width="120">
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 30px" :src="scope.row.url" :preview-src-list="[scope.row.url]">
                        <div slot="error" class="image-slot">
                            暂无图片
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="businessId" label="商家id" align="center"></el-table-column> -->
			<!-- <el-table-column prop="businessName" label="商家名称" align="center"></el-table-column> -->
            <!-- <el-table-column prop="address" label="店铺地址" align="center" width="100"></el-table-column> -->
			<el-table-column prop="expireDate" label="到期时间" align="center" width="170"></el-table-column>
            <el-table-column label="操作" width="200" fixed="right" align="center">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="viewDetail(scope.row)">领取详情</el-button>
					<el-button v-if="scope.row.state == 0" type="primary" size="mini" @click="cancel(scope.row)">取消</el-button>
				</template>
			</el-table-column>
        </el-table>
        <div class="pages">
			<el-pagination :page-size="formData.size" :current-page="formData.page" layout="prev, pager, next,total,jumper"
			 :total="total" background @current-change="handleCurrentChange">
			</el-pagination>
		</div>
        <el-dialog title="领取详情" :visible.sync="detailDialog" width="100%">
            <el-table :data="detailTableData" style="width: 100%" height="500" border>
                <el-table-column prop="avatar" label="头像" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 30px" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]">
                            <div slot="error" class="image-slot">
                                暂无图片
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="用户昵称" align="center"></el-table-column>
                <el-table-column prop="sweets" label="领取糖果数量" align="center"></el-table-column>
                <el-table-column prop="createDate" label="领取时间" align="center"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data () {
        return {
            detailDialog: false,
            formData: {
                businessId: localStorage.getItem('merchantId'),
                activityName: '',
                page: 1,
                size: 10,
            },
            total: 0,
            tableData: [],
            redEnvelopesTypes: {
                0: '平均',
                2: '拼手气'
            },
            states: {
                0: '进行中',
                1: '已结束',
                2: '已取消'
            },
            detailTableData: []
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            this.$http.get(this.$api.activityList, this.formData).then(res => {
                this.tableData = res.data;
                this.total = res.extraInfo;
            })
        },
        onSearch() {
            this.page = 1;
            this.getData();
        },
        handleCurrentChange(val) {
            this.formData.page = val;
            this.getData();
        },
        viewDetail(row) {
            this.$http.get(this.$api.activityDetails, { id: row.id }).then(res => {
                this.detailDialog = true;
                this.detailTableData = res.data;
            })
        },
        cancel(row) {
            this.$confirm('请确认是否要取消活动?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.put(this.$api.activityCancel, {
                    activityId: row.id,
                    userId: row.businessId
                }).then(res => {
                    if (res.code == 0) {
                        this.getData()
                        this.$message({
                            message: '确认成功！',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('确认失败,' + res.msg);
                    }

                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        }
    }
}
</script>
<style scoped>
	.activity {
		padding: 15px;
	}

	.pages {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30px;
	}

	.activity>>>.el-image-viewer__close{
		color: white;
	}
</style>